<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录页面</title>
		<!--<link rel="stylesheet" type="text/css" href="css/login.css"/>-->
		<style type="text/css">
			.background{
				margin:0;
				padding:0;
				/*设置字体*/
				font-family:sans-serif;
				/*插入背景图片*/
				background-image:url(img/enter.jpg);
				/*使背景图片只出现一次*/
				background-repeat: no-repeat;
				/*使背景图片把电脑屏幕覆盖完*/
				background-size:cover;
			}
			/*使登录框固定在页面中间*/
			.box{
				width:400px;
				padding:40px;
				position:absolute;
				top:50%;
				left:50%;
				transform:translate(-50%,-50%);
				background:rgba(0,0,0,.3);
				/*不使用border-box属性时,width=content;使用时width=content+padding+border,可以去看盒子的模型*/
				box-sizing: border-box;
				/*使他有个背景阴影,看你起来有立体感*/
				box-shadow:0 15px 25px rgba(0,0,0,.5);
				/*给这个div设置弧度*/
				border-radius:10px;
			}
			.box h2{
				color:#fff;
				/*使内容水平居中*/
				text-align: center;
				margin:0 0 30px;
				padding:0;
			}
			.inputBox{
				position: relative;
			}
			.inputBox input{
				width:100%;
				padding:10px 0;
				color:#fff;
				/*字体之间的间距*/
				letter-spacing: 1px;
				margin-bottom:20px;
				border:none;
				border-bottom:1px solid #fff;
				outline:none;
				/*背景颜色为透明*/
				background:transparent;
			}
			.inputBox label{
				position:absolute;
				top:0;
				left:0;
				padding:10px 0;
				letter-spacing: 1px;
				color:#fff;
				/*虚无缥缈,比较抽象*/
				pointer-events:none;
				transition:.5s;
			}
			/*使在input里面输入数值时使字体变小且向上移动*/
			.inputBox input:focus~label,
			.inputBox input:valid ~ label{
				top:-18px;
				left:0;
				color:#03a9f4;
				font-size:12px;
			}
			/*[type="submit"]特别指定是哪一个input的属性*/
			.box input[type="submit"]{
				background:transparent;
				/*去除input的默认样式*/
				border:none;
				outline: none;
				color:#fff;
				background:#03a9f4;
				padding:10px 20px;
				/*当鼠标放到该位置时会变成一只小手*/
				cursor:pointer;
				border-radius: 5px;
			}
			.text-right{
				display:inline-block;
				float:right;
				color:white;
			}
			.text-right span{
				color:white;
				/*inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。*/
				display:inline-block;
				font-size:12px;
			}
			.text-right a{
				text-decoration:none ;
				color:white;
				font-size:12px;
				
			}	
		</style>
	</head>
	<body class="background">
		<div class="box">
			<h2>Login</h2>
			<div class="inputBox">
	    		<input type="text" name="" required="" id="user">
	    		<label>Username</label>
	    	</div>
	    	<div class="inputBox">
	    		<input type="password" name="" required="" id="pass">
	    		<label>password</label>
	    	</div>
	    	<div class="text-right">
	    		<span>没有账号|</span>
	    		<a href="register.html">注册</a>
	    	</div>
	    	<input type="submit" name="" value="Submit" class="refer">
 		</div>
		<!--本页面插入当前目录下的js文件夹下的jquery.js文件，这是引入JS文件的方法-->
 	 	<script src="js/jquery-1.12.4.min.js"></script>
 	 	<!--引用javaScript的路径-->
 	 	<script type="text/javascript">
// 	 		获取当前文档中指定的元素
 	 		var refer=document.getElementsByClassName("refer")[0];
 	 		var show=document.getElementById("show");
// 	 		用ajax来连接登录的接口
 	 		$(function(){
 	 			$(".refer").click(function(){
// 	 				获取user和pass里面的值
					username=user.value;
					password=pass.value;
 	 				$.ajax({
// 	 					登录的接口
 	 					url:"http://118.195.129.130:3000/user/login",
// 	 					请求的类型
 	 					type:"post",
// 	 					异步
 	 					async:true,
// 	 					将所获取的数据传给后台
 	 					data:{
 	 						us:username,
 	 						ps:password
 	 					},
// 	 					成功返回的结果
 	 					success:function(data){ 
// 	 						如果data.err为-1将后台的判断结果用警示框弹出来,并把input里面的内容清空
							if(data.err==-1){
								alert(data.msg);
								pass.value="";
							}
//							如果data.err=0,则实现页面跳转,并获取登录信息中的id,方便后边查询个人信息
							else if(data.err==0){				
								window.location.href="ruoyi.html";
								var login_id=data.data[0]._id;
								localStorage.setItem("login_id",login_id);
								console.log(data);
							}else{
								alert(data.msg);
							}
 	 					},
// 	 					错误返回的结果
 	 					error:function(err){
 	 						console.log("错误");
 	 					}
 	 				});
 	 			})
 	 		})
 	 	</script>
	</body>
</html>
